<template>
  <view>
    <view v-if="recordDetail" class="header">
      <view class="icon">
        <view
          class="icon iconfont flex-align-center flex-justify-content-center"
          :class="[`${RECORD_TYPE_ICON[Number(recordDetail.recordType)]}`]"
          :style="{ color: 'white' }"
        ></view
      ></view>
      <view :style="{ color: '#ffb72f' }" class="balanceFee">
        <text v-if="recordDetail.balanceFee > 0">+</text>
        {{ recordDetail.balanceFee | formatCurrency }}</view
      >
      <view class="balance">
        剩余:￥{{ recordDetail.balance | formatCurrency }}</view
      >
    </view>
    <view class="record-detail" v-if="recordDetail">
      <view class="flex-align-center item">
        <view class="label">门店</view>
        <view class="value">{{ recordDetail.shopName || "无" }}</view>
      </view>
      <view class="flex-align-center item">
        <view class="label">类型</view>
        <view class="value">{{
          recordDetail.recordType | filterRecordType
        }}</view>
      </view>
      <view class="flex-align-center item">
        <view class="label">变动时间</view>
        <view class="value">{{ recordDetail.createTime || "无" }}</view>
      </view>
      <view
        class="flex-align-center item"
        v-if="Number(recordDetail.recordType) === 1"
      >
        <view class="label">充值单号</view>
        <view class="value">{{ recordDetail.bizOrderNo || "无" }}</view>
      </view>

      <view
        class="flex-align-center item"
        v-if="
          Number(recordDetail.recordType) === 3 ||
          Number(recordDetail.recordType) === 4
        "
      >
        <view class="label">订单编号</view>
        <view class="value">{{ recordDetail.bizOrderNo || "无" }}</view>
      </view>

      <view class="flex-align-center item">
        <view class="label">备注</view>
        <view class="value">{{ recordDetail.remark || "无" }}</view>
      </view>
    </view>

    <view v-else class="empty flex-align-center flex-justify-content-center">
      <list-empty></list-empty
    ></view>
  </view>
</template>

<script>
import { getBalanceRecordDetail } from "@/service/api/sp-common/member";
import listEmpty from "@/components/baseComponents/list-enpty";
import { RECORD_TYPE, RECORD_TYPE_ICON } from "@/pages/sp-store/const/member";

export default {
  name: "index",
  components: { listEmpty },
  data() {
    return {
      params: {
        recordId: "",
      },
      options: null,
      recordDetail: null,
      RECORD_TYPE_ICON,
    };
  },
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
  },
  filters: {
    filterRecordType(type) {
      return RECORD_TYPE[Number(type)];
    },
  },
  onLoad(options) {
    this.params.recordId = options?.recordId;
    this.$nextTick(() => {
      this.innit();
    });
    this.options = options;
  },
  methods: {
    async innit() {
      const data = await getBalanceRecordDetail({
        recordId: this.options?.recordId,
      });
      this.recordDetail = data;
    },
  },
};
</script>

<style scoped lang="scss">
.empty {
  height: 100vh;
}
.header {
  text-align: center;
  margin-top: 80rpx;
  margin-bottom: 110rpx;
  .icon {
    margin-left: 50%;
    transform: translateX(-50%);
    width: 150rpx;
    height: 150rpx;
    background: #ffb72f;
    border-radius: 50%;
    font-size: 80rpx;
    text-align: center;
  }
  .balanceFee {
    margin-top: 35rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffb72f;
  }
  .balance {
    margin-top: 19rpx;
    font-size: 29rpx;
    font-weight: 500;
    color: #000000;
  }
}
.record-detail {
  padding: 0 33rpx;
  font-family: PingFang SC;
  .item {
    padding-bottom: 45rpx;
  }
  .label {
    width: 135rpx;
    font-size: 29rpx;
    font-weight: 500;
    color: #131313;
    opacity: 0.7;
  }
  .value {
    flex: 1;
    text-align: right;
    font-size: 29rpx;
    font-weight: 500;
    color: #131313;
  }
}
</style>
